import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Dimensions, Text, Image, TouchableOpacity } from "react-native";
import { Divider } from "@rneui/themed";
import { useDispatch } from "react-redux";
import IconNavBar from '@/components/IconNavBar'
import { sectokenHaveSafeProps } from '@/config/navigatorProps'
import { PayWithArray } from '@/config/config'
import { getValue } from '@/utils/deviceStorage'

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const SectokenHaveSafe = (props) => {

    const dispatch = useDispatch()
    const [safeWalletList, setSafeWalletList] = useState([]);

    useEffect(() => {
        let list = getValue('safeWalletList')
        setSafeWalletList(list)
    }, []);

    const handlePressItem = (item) => {
        dispatch({ type: "setSelectedSafeWallet", value: item || {} });
        props.navigation.navigate({
            name: 'safe-main',
            params: {
                load: true
            }
        })
    }

    const handlePressLeft = () => {
        props.navigation.goBack()
    }

    const handlePressRight = () => {
        props.navigation.navigate('safe-no-account')
    }

    return (
        <View style={styles.container}>
            <IconNavBar {...props} {...sectokenHaveSafeProps} handlePressLeft={handlePressLeft} handlePressRight={handlePressRight} />
            {safeWalletList ? safeWalletList.map((item, index) => {
                return (
                    <View key={index}>
                        <TouchableOpacity style={styles.itemContent} onPress={() => { handlePressItem(item) }}>
                            <Image source={PayWithArray[item.profileImg]} style={styles.img} />
                            <View style={{ marginLeft: 10 * ratio }}>
                                <Text
                                    ellipsizeMode='middle'
                                    numberOfLines={1}
                                    style={styles.title1}>
                                    {item.label}
                                </Text>
                                <Text
                                    ellipsizeMode='middle'
                                    numberOfLines={1}
                                    style={styles.title2}>
                                    {item.address}
                                </Text>
                            </View>
                        </TouchableOpacity>
                        <Divider color='#EFEFEF' />
                    </View>
                )
            }) : null}
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFFFFF'
    },
    itemContent: {
        height: 62 * ratio,
        alignItems: 'center',
        flexDirection: 'row'
    },
    img: {
        width: 40 * ratio,
        height: 40 * ratio,
        marginLeft: 15 * ratio
    },
    title1: {
        fontSize: 16,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#2C2C2C',
        lineHeight: 24
    },
    title2: {
        width: 180 * ratio,
        fontSize: 12,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#898989',
        lineHeight: 18
    }
})
export default SectokenHaveSafe